<template>
    <el-dialog 
        v-model="visible" 
        title="用户列表" 
        width="60%" 
        :before-close="handleClose" 
        destroy-on-close
        :style="{ height: '70vh' }"
        class="user-list-dialog"
    >
        <div class="user-list-container">
            <element-table 
                :data="users" 
                :table-title="tableConfig" 
                :show-pagination="true" 
                :page-config="pageConfig"
                :loading="loading"
            />
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { $getUsersByRole } from '@/api/user'
import { error } from '@/utils/toast'
import elementTable from '@/components/ElementTable/index.vue'
// Props定义
interface Props {
    visible: boolean
    roleId: number | null
    roleName?: string
}

const props = withDefaults(defineProps<Props>(), {
    visible: false,
    roleId: null,
    roleName: ''
})

// Emits定义
const emit = defineEmits<{
    'update:visible': [value: boolean]
}>()

// 响应式数据
const users = ref<any[]>([])
const loading = ref(false)

// 分页配置
const pageConfig = ref({
    currentPage: 1,
    pageSize: 10,
    pageSizes: [10, 20, 50, 100],
    layout: 'total, sizes, prev, pager, next, jumper',
    total: 0,
    background: true,
    handleSizeChange: (size: number) => {
        pageConfig.value.pageSize = size
        pageConfig.value.currentPage = 1
        loadUsers()
    },
    handleCurrentChange: (page: number) => {
        pageConfig.value.currentPage = page
        loadUsers()
    }
})

// 表格配置
const tableConfig = ref([
    {
        type: 'index',
        label: '序号',
        width: '80'
    },
    {
        type: 'text',
        label: '用户名',
        prop: 'name',
    },
    {
        type: 'text',
        label: '手机号',
        prop: 'phone',
        width: '140'
    },
    {
        type: 'text',
        label: '邮箱',
        prop: 'eMail',
    },
    {
        type: 'status',
        label: '状态',
        prop: 'isEnable',
        width: '100',
        options: [
            { value: true, text: '启用', type: 'success' },
            { value: false, text: '禁用', type: 'danger' }
        ]
    }
])

// 计算属性
const visible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
})

// 加载用户列表
const loadUsers = async () => {
    if (!props.roleId) {
        error('角色ID不能为空')
        return
    }

    try {
        loading.value = true
        const response = await $getUsersByRole(props.roleId)
        const allUsers = response.data || []
        
        // 更新总数
        pageConfig.value.total = allUsers.length
        
        // 计算分页数据
        const start = (pageConfig.value.currentPage - 1) * pageConfig.value.pageSize
        const end = start + pageConfig.value.pageSize
        users.value = allUsers.slice(start, end)
    } catch (err) {
        console.error('获取用户列表失败:', err)
        error('获取用户列表失败')
    } finally {
        loading.value = false
    }
}

// 关闭对话框
const handleClose = () => {
    visible.value = false
}

// 监听visible变化，当对话框打开时加载数据
watch(() => props.visible, (newVal) => {
    if (newVal && props.roleId) {
        loadUsers()
    }
})

// 监听roleId变化
watch(() => props.roleId, (newVal) => {
    if (newVal && props.visible) {
        loadUsers()
    }
})
</script>

<style scoped>
.user-list-dialog :deep(.el-dialog) {
    height: 70vh;
    display: flex;
    flex-direction: column;
}

/* .user-list-dialog :deep(.el-dialog__body) {
    padding: 20px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
} */

.user-list-container {
    padding: 0;
    height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-section {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

:deep(.el-form-item) {
    margin-bottom: 0;
}

:deep(.el-form-item__label) {
    font-weight: 500;
    color: #606266;
}

/* 确保表格容器有正确的高度 */
:deep(.element-table-container) {
    flex: 1;
    overflow: auto;
}

/* 表格样式优化 */
:deep(.el-table) {
    height: 100%;
}

:deep(.el-table__body-wrapper) {
    max-height: calc(70vh - 200px);
    overflow-y: auto;
}
</style>
